<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
        <meta charset="UTF-8"/>
        <style type="text/css">
            html, body, #map_canvas {
                margin: 0;
                padding: 0;
                height: 100%;
            }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var map;
            var A = new google.maps.LatLng(0, 0)//A
            var B = new google.maps.LatLng(0, 0)//B
            var directionDisplay;
            var directionsService = new google.maps.DirectionsService();
            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();
                var myOptions = {
                    zoom: 14,
                    center: A,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
                directionsDisplay.setMap(map);
                calcRoute();
            }
               
            function calcRoute() {
                var selectedMode = 'DRIVING';
                var request = {
                    origin: A,
                    destination: B,
                    travelMode: google.maps.DirectionsTravelMode[selectedMode]
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
                });
            }
            google.maps.event.addDomListener(window, 'load', initialize);                
        </script>
    </head>
    <body style="margin:0px; padding:0px;">
        <div id="map_canvas" style="width:100%; height:100%"></div>
    </body>
</html>